<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件切换</title>
    <script src="../../vue.js"></script>
</head>
<body>
   <div id="app">
        <a href="#" @click.prevent="comName='login'">登录</a>
        <a href="#" @click.prevent="comName='register'">注册</a>
        <a href="#" @click.prevent="comName='logout'">退出</a>
        <component v-bind:is="comName"></component>
   </div> 
   <script>

       Vue.component('login',{
           template:'<div>登录页面</div>'
       })

       Vue.component('register',{
           template:'<div>注册页面</div>'
       })

       Vue.component('logout',{
           template:'<div>退出页面</div>'
       })
       var vm=new Vue({
           el:'#app',
           data:{
               comName:""
           }
       })

   </script>
</body>
</html>